<template>
  <el-drawer
    v-model="dialogFormVisible"
    :title="dialogTitle"
    size="80%"
    @close="handleClose"
  >
    <el-form
      :model="formData"
      ref="formRef"
      :rules="rules"
      label-position="right"
      label-width="80px"
      size="default"
      :scroll-to-error="true"
      :show-message="false"
    >
      <el-form-item
        label="标题"
        prop="title"
        class="required label-right-align"
        label-width="120px"
      >
        <el-input
          v-model="formData.title"
          type="text"
          clearable
          :style="{ width: '300px' }"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item
        label="输入项"
        prop="field"
        class="required label-right-align"
        label-width="120px"
      >
        <el-input-tag
          v-model="formData.field"
          placeholder="请填写需要输入的项目，按回车添加"
          aria-label="请填写需要输入的项目，按回车添加"
        />
      </el-form-item> -->
      <el-form-item
        label="内容"
        prop="content"
        class="required label-right-align"
        label-width="120px"
      >
        <Uediter
          :text="formData.content"
          :config="ueditor.config"
          ref="ue"
          @update:text="contentChangeFunc"
          :insertTabs="insertTabs"
        >
        </Uediter>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogClose">关闭</el-button>
        <el-button type="primary" @click="submitForm"> 提交 </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  defineExpose,
  defineEmits,
  onMounted,
  computed,
} from "vue";
import { ElMessage } from "element-plus";
import Uediter from "@/components/UE.vue";
import { addTplApi, editTplApi, getTplInfoApi } from "@/api/contract/contract";
const dialogFormVisible = ref(false);
const formRef = ref(null);
const dialogTitle = ref("");
const ue = ref<any>(null);
/*富文本框配置*/
const ueditor = ref({
  text: "",
  config: {
    //height: "800px",
  },
});
const props = defineProps({
  department: {
    type: Array,
    default: [] as any[],
  },
  classList: {
    type: Array,
    default: [] as any[],
  },
});
const formData = ref({
  id: 0,
  title: "",
  field: [] as string[],
  content: "",
  sort: 0,
});
const insertTabs = computed(() => {
  //return [...formData.value.field, "签名", "日期"];
  return [];
});
const rules = reactive({
  title: [
    {
      required: true,
      message: "请输入标题",
    },
  ],
  field: [
    {
      required: true,
      message: "请添加输入项",
    },
  ],
  content: [
    {
      required: true,
      message: "请输入内容",
    },
  ],
});

const emits = defineEmits(["getTable"]);
const contentChangeFunc = (e) => {
  formData.value.content = e;
};
function addSave() {
  addTplApi(formData.value)
    .then((res) => {
      ElMessage.success("添加成功");
      emits("getTable");
      dialogClose();
    })
    .catch((err) => {});
}
function editSave() {
  editTplApi(formData.value)
    .then((res) => {
      ElMessage.success("编辑成功");
      emits("getTable");
      dialogClose();
    })
    .catch((err) => {});
}
function getInfo(id) {
  getTplInfoApi(id)
    .then((res: any) => {
      if (res.code == 1) {
        formData.value = res.data;
        ue.value.setContent(formData.value.content);
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {});
}

function submitForm() {
  formRef.value.validate().then(() => {
    if (formData.value.id == 0) {
      addSave();
    } else {
      editSave();
    }
  });
}

const dialogClose = () => {
  dialogFormVisible.value = false;
};

const dialogOpen = (id: number) => {
  dialogFormVisible.value = true;
  if (id > 0) {
    dialogTitle.value = "编辑模板";
    getInfo(id);
  } else {
    dialogTitle.value = "添加模板";
  }
};

const handleClose = () => {
  formRef.value.resetFields();
  formData.value = {
    id: 0,
    field: [] as string[],
    title: "",
    content: "",
    sort: 0,
  };
  dialogFormVisible.value = false;
};
const handleTabClick = (con: string) => {
  /*let label = tab.props.label;
  let insert = "{{" + label.replace("插入", "") + "}}";*/
  ue.value.insertHtml(con);
};
defineExpose({
  dialogOpen,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
</style>

<style lang="scss" scoped></style>
